<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>书店首页</title>
    <link rel="stylesheet" th:href="@{/css/index.css}"/>
</head>
<body>
<header>
    <div class="header-content">
        <h1>欢迎来到书店系统</h1>
        <nav>
            <ul class="nav-links nav-left">
                <li><a th:href="@{/}">首页</a></li>
            </ul>
            <ul class="nav-links nav-right">
                <li th:if="${#authentication.principal != null}">
                    <span class="welcome-text">欢迎，<span th:text="${#authentication.name}">用户名</span>!</span>
                </li>
                <li th:if="${#authentication.principal != null}">
                    <a th:href="@{/cart}">购物车</a>
                </li>
                <li th:if="${#authentication.principal == null}">
                    <a th:href="@{/login}">登录</a>
                </li>
                <li th:if="${#authentication.principal == null}">
                    <a th:href="@{/register}">注册</a>
                </li>
                <li th:if="${#authorization.expression('hasRole(''ADMIN'')')}">
                    <a th:href="@{/admin}">管理后台</a>
                </li>
                <li th:if="${#authentication.principal != null}">
                    <a th:href="@{/logout}">注销</a>
                </li>
            </ul>
        </nav>
    </div>
</header>

<main class="container">
    <h2>图书列表</h2>

    <div th:if="${msg != null}" class="message" th:text="${msg}"></div>

    <div th:if="${books != null and !books.isEmpty()}">
        <table class="books-table">
            <thead>
            <tr>
                <th>书名</th>
                <th>作者</th>
                <th>价格</th>
                <th>库存</th>
                <th>购买数量</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="book : ${books}">
                <td th:text="${book.getTitle()}">书名</td>
                <td th:text="${book.getAuthor()}">作者</td>
                <td th:text="${#numbers.formatDecimal(book.price, 0, 'NONE', 2, 'POINT')}">价格</td>
                <td th:text="${book.getStock()}">库存</td>
                <form th:action="@{/cart/add}" method="post" class="add-to-cart-form">
                    <td class="quantity-cell">
                        <input type="hidden" name="bookId" th:value="${book.getId()}"/>
                        <label for="quantity-${book.id}" class="visually-hidden">购买数量</label>
                        <input type="number" id="quantity-${book.id}" name="quantity" min="1"
                               th:max="${book.getStock()}"
                               value="1" required/>
                    </td>
                    <td class="action-cell">
                        <input type="hidden" name="bookId" th:value="${book.getId()}"/>
                        <label for="quantity-${book.id}" class="visually-hidden"></label>
                        <button type="submit" th:disabled="${book.getStock() == 0}">加入购物车</button>
                    </td>
                </form>
            </tr>
            </tbody>
        </table>
    </div>

    <div th:if="${books == null or books.isEmpty()}" class="no-books">
        <p>暂无图书，敬请期待！</p>
    </div>

    <div class="cart-link">
        <a th:href="@{/cart}" class="btn">查看购物车</a>
    </div>
</main>

<footer>
    <p>书店系统 &copy; 2025</p>
</footer>
</body>
</html>